<template>
  <el-form label-width="120px" size="small">
    <el-row>
      <el-col :span="18">
        <el-form-item label="节点类型">
          <el-radio-group v-model="categoryInfo.type">
            <el-radio label="category" name="category">分类节点</el-radio>
            <el-radio label="feature" name="feature">知识对象</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row v-show="parentInputShow">
      <el-col :span="18">
        <el-form-item label="父节点">
          <el-input disabled v-model="categoryInfo.parentName"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row v-if="categoryInfo.type === 'category'">
      <el-col :span="18">
        <el-form-item label="名称">
          <el-input v-model="categoryInfo.name"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <div v-show="categoryInfo.type === 'feature'">

      <el-row :gutter="10">
        <el-col :span="9">
          <el-form-item label="发布对象分类">
            <el-select v-model="categoryInfo.publishCategoryId" placeholder="请选择发布对象分类" @change="categoryChangeHandler">
              <el-option v-for="item in publishCategoryList" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="已发布对象">
            <el-select v-model="categoryInfo.recordId" placeholder="请选择已发布对象" @change="recordChangeHandler">
              <el-option v-for="item in publishRecordList" :key="item.recordId" :label="item.publishName"
                :value="item.recordId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label="关联特征">
            <el-input disabled v-model="relateFeatures"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
  </el-form>
</template>
<script>
import { $FeaturePublishApi } from '@/network/feature/FeaturePublishApi';

export default {
  name: 'LibraryCategoryForm',
  props: {
    parentId: {
      type: String
    },
    parentName: {
      type: String
    }
  },
  data() {
    return {
      categoryInfo: {
        parentId: this.parentId,
        parentName: this.parentName,
        name: "",
        type: "category",
        publishCategoryId: '',
        recordId: ''
      },
      publishCategoryList: [],
      publishRecordList: [],
      relateFeatures: '',
    }
  },
  methods: {

    async loadPublishCategoryList() {
      const { data } = await $FeaturePublishApi.listCategoryTree();
      this.publishCategoryList = data;
    },

    async categoryChangeHandler(selection) {
      if (selection) {
        let params = { categoryId: selection };
        const { data } = await $FeaturePublishApi.listFeaturePublishInfo(params);
        this.publishRecordList = data;
      }
    },

    async recordChangeHandler(recordId) {
      const record = this.publishRecordList.find(item => item.recordId === recordId);
      if (record) {
        this.relateFeatures = record.featureLabels;
      }
    },

    takeFormData() {
      return { ...this.categoryInfo };
    }

  },

  mounted() {
    this.loadPublishCategoryList();
  },

  computed: {
    parentInputShow() {
      return this.parentId && this.parentName;
    }
  },



}
</script>
<style scoped>
.tag-fuzzy-box ::v-deep input[aria-hidden="true"] {
  display: none !important;
}

.tag-fuzzy-box ::v-deep.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  box-shadow: none !important;
}

::v-deep .el-radio__original {
  display: none !important;
}

::v-deep.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
  box-shadow: none !important;
}
</style>